<template>
<div v-loading="isAjaxing">
  <el-card style="margin-bottom: 20px;">
    <el-form size="small" label-width="100px" ref="searchRef" :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="ID" prop="id">
            <el-input class="navSearchInput" v-model="searchForm.id" placeholder="请输入ID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号" prop="mobile">
            <el-input class="navSearchInput" v-model="searchForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="QQ" prop="qq">
            <el-input class="navSearchInput" v-model="searchForm.qq" placeholder="请输入qq号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信" prop="vx">
            <el-input class="navSearchInput" v-model="searchForm.vx" placeholder="请输入微信号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input class="navSearchInput" v-model="searchForm.email" placeholder="请输入邮箱号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="域名" prop="domain">
            <el-input class="navSearchInput" v-model="searchForm.domain" placeholder="请输入授权域名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="IP" prop="ip">
            <el-input class="navSearchInput" v-model="searchForm.ip" placeholder="请输入授权IP"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购买时间" prop="pay_time">
            <el-date-picker
              value-format="YYYY-MM-DD"
              class="timeSelect"
              v-model="searchForm.pay_time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="到期时间" prop="expiration_time">
            <el-date-picker
              value-format="YYYY-MM-DD"
              class="timeSelect"
              v-model="searchForm.expiration_time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button size="small" @click="resetFilter">重置</el-button>
      <el-button size="small" @click="search" type="primary">确认</el-button>
    </div>
  </el-card>
  <el-card>
    <div>
      <el-button size="small" @click="getList"><i class="el-icon-refresh-right"></i></el-button>
      <el-button size="small" type="primary" @click="dialogShow = true;isEdit = false;">添加授权</el-button>
      <el-button size="small" type="danger" @click="confirmDelete(selectKeys)" :disabled="selectKeys.length == 0">删除选中授权</el-button>
    </div>
    <el-table :data="tableData" height="450" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"></el-table-column>
      <el-table-column label="ID" prop="id" width="80"></el-table-column>
      <el-table-column label="域名" prop="domain"></el-table-column>
      <el-table-column label="IP" prop="ip"></el-table-column>
      <el-table-column label="手机" prop="mobile">
        <template #default="{ row }">
          <span>{{ row.mobile ?  row.mobile : '-'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信" prop="vx">
        <template #default="{ row }">
          <span>{{ row.vx ?  row.vx : '-'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="QQ" prop="qq">
        <template #default="{ row }">
          <span>{{ row.qq ?  row.qq : '-'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" prop="email">
        <template #default="{ row }">
          <span>{{ row.email ?  row.email : '-'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="授权价格" prop="price"></el-table-column>
      <el-table-column label="到期时间" prop="expiration_time"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button size="mini" type="primary" @click="editShow(row)">修改</el-button>
          <el-button size="mini" type="danger" @click="confirmDelete([row.id])">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="filter.page"
      :page-sizes="[10, 50, 100, 150]"
      :page-size="filter.per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</div>
  <el-dialog v-model="dialogShow" :title="isEdit ? '修改授权' : '添加授权'" :before-close="handleBeforeClose">
    <el-form :model="dialogForm" label-position="top" size="small" :rules="rules" ref="dialogRef">
      <el-form-item label="授权域名" prop="domain">
        <el-input v-model="dialogForm.domain" placeholder="请输入要授权的域名"></el-input>
      </el-form-item>
      <el-form-item label="授权IP" prop="ip">
        <el-input v-model="dialogForm.ip" placeholder="请输入要授权的IP"></el-input>
      </el-form-item>
      <el-form-item label="授权价格" prop="price">
        <el-input v-model="dialogForm.price" placeholder="请输入授权出售的价格"></el-input>
      </el-form-item>
      <el-form-item label="到期时间" prop="expiration_time">
        <el-date-picker
          style="width: 100%;"
          value-format="YYYY-MM-DD"
          v-model="dialogForm.expiration_time"
          type="date"
          placeholder="请选择到期时间"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :disabledDate="disabledDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="dialogForm.mobile" placeholder="请输入购买者手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dialogForm.email" placeholder="请输入购买者邮箱"></el-input>
      </el-form-item>
      <el-form-item label="QQ" prop="qq">
        <el-input v-model="dialogForm.qq" placeholder="请输入购买者QQ"></el-input>
      </el-form-item>
      <el-form-item label="微信" prop="vx">
        <el-input v-model="dialogForm.vx" placeholder="请输入购买者微信"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" size="small" @click="dialogShow = false">取消</el-button>
      <el-button type="primary" size="small" @click="submit()" :loading="isSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'
import { addGive, deleteGive, getGive, updateGive } from '../../../axios/adminRequest'
import { computedPage } from '../../../utils/utils'

export default {
  name: 'empower',
  setup(){
    let { proxy } = getCurrentInstance()
    const state = reactive({
      selectKeys:[],
      isAjaxing:true,
      shortcuts: [
        {
          text: '最近一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        }, {
          text: '最近一个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        }, {
          text: '最近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        }
      ],
      filter:{
        page:1,
        per_page:10
      },
      tableData:[],
      total:0,
      searchForm:{
        id:'',
        mobile:'',
        email:'',
        qq:'',
        vx:'',
        domain:'',
        ip:'',
        pay_time:[],
        expiration_time:[]
      },
      dialogShow:false,
      isEdit:false,
      dialogForm:{
        domain:'',
        expiration_time:'',
        ip:'',
        price:'',
        mobile:'',
        email:'',
        qq:'',
        vx:''
      },
      rules:{
        domain:[{required:true,message:'请输入授权域名',trigger:'blur'}],
        ip:[{required:true,message:'请输入授权IP',trigger:'blur'}],
        price:[{required:true,message:'请输入授权价格',trigger:'blur'}],
        expiration_time:[{required:true,message:'请选择授权到期时间',trigger:'change'}]
      },
      editId:'',
      isSubmit:false
    })

    const getList = (searchForm)=>{
      state.isAjaxing = true
      if(searchForm){
        state.filter = { ...state.filter,...searchForm}
      }
      getGive(state.filter).then(res=>{
        if(res.code == 0){
          state.tableData = res.data.data
          state.total = res.data.total
        }else{
          proxy.$message.error(res.msg)
        }
        state.isAjaxing = false
      })
    }

    getList()

    const handleSizeChange = (val) => {
      state.filter.page = 1
      state.filter.per_page = val
      getList()
    }

    const handleCurrentChange = (val) => {
      state.filter.page = val
      getList()
    }

    const submit = ()=>{
      proxy.$refs.dialogRef.validate(bool=>{
        if(bool){
          let result;
          state.isSubmit = true
          if(state.isEdit){
            result = updateGive({
              id:state.editId,
              ...state.dialogForm,
              expiration_time:state.dialogForm.expiration_time + ' 00:00:00',
            })
          }else{
            result = addGive({
              ...state.dialogForm,
              expiration_time:state.dialogForm.expiration_time + ' 00:00:00',
            })
          }
          result.then(res=>{
            if(res.code == 0){
              proxy.$refs.searchRef.resetFields()
              state.dialogShow = false
              proxy.$message.success('操作成功')
              getList()
            }else{
              proxy.$message.error(res.msg)
            }
            state.isSubmit = false
          })
        }
      })
    }

    const editShow = (row) => {
      state.editId = row.id
      state.isEdit = true
      state.dialogShow = true
      for (let k in state.dialogForm){
        if(k == 'expiration_time'){
          state.dialogForm[k] = row[k].slice(0,10)
        }else{
          state.dialogForm[k] = row[k]
        }
      }
    }

    const resetFilter = () => {
      state.filter.page = 1
      proxy.$refs.searchRef.resetFields()
      getList(state.searchForm)
    }

    const search = ()=>{
      state.filter.page = 1
      let expiration_time = state.searchForm.expiration_time.map(item=>{
        item += ' 00:00:00'
        return item
      })
      let pay_time = state.searchForm.pay_time.map(item=>{
        item += ' 00:00:00'
        return item
      })
      getList({
        ...state.searchForm,
        expiration_time,
        pay_time
      })
    }

    const handleSelectionChange = (val)=>{
      let arr = []
      val.forEach(item=>{
        arr.push(item.id)
      })
      state.selectKeys = arr;
    }

    const handleBeforeClose = (done)=>{
      if(state.isSubmit){
        proxy.$message.warning('暂时无法关闭')
      }else{
        proxy.$refs.dialogRef.resetFields()
        done()
      }
    }

    const confirmDelete = (list) => {
      proxy.$confirm('确认要删除选中的授权吗？','提示',{
        type:'error'
      }).then(()=>{
        state.isAjaxing = true
        deleteGive({id:list}).then(res=>{
          if(res.code == 0){
            state.filter.page = computedPage(list.length,state.filter.page,state.filter.per_page,state.total)
            getList()
            proxy.$message.success('删除成功')
          }else{
            state.isAjaxing = false
            proxy.$message.error(res.msg)
          }
        })
      })
    }

    const disabledDate = (date)=>{
      return +new Date(date) <= Date.now()
    }

    return{
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      submit,
      editShow,
      resetFilter,
      search,
      getList,
      handleBeforeClose,
      handleSelectionChange,
      confirmDelete,
      disabledDate
    }

  }
}
</script>

<style lang="less" scoped>
.navSearchInput{
  width: 100% !important;
  max-width: 250px !important;
}
&:deep(.timeSelect){
  width: 100% !important;
  max-width: 250px;
}
</style>
